import * as React from "react";
import Chip from "@mui/material/Chip";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import Member from "./Member";

interface Message {
  id: string;
  content: string;
  sender: string;
  createdAt: string;
}

const MessageItem: React.FC<{ data: Message }> = ({ data }) => {
  return (
    <Stack spacing={1} sx={{ maxWidth: 200 }}>
      {data.sender !== "name1" && (
        <Member data={{ id: data.sender, name: data.sender }} />
      )}
      <Chip
        sx={{
          height: "auto",
          "& .MuiChip-label": {
            display: "block",
            whiteSpace: "normal",
          },
        }}
        label={data.content}
        color={data.sender === "name1" ? "primary" : "default"}
      />
      <Typography
        variant="caption"
        color="text.secondary"
        sx={{ textAlign: "right" }}
      >
        {new Date(data.createdAt).toLocaleString("ja-JP", {
          month: "2-digit",
          day: "2-digit",
          hour: "2-digit",
          minute: "2-digit",
        })}
      </Typography>
    </Stack>
  );
};

export default MessageItem;
